@import './reset';
::-webkit-input-placeholder { color:#999; }
body{
	background: #f5f8fa;
}
.container{
	width: 100%;
	background: #F5F8FA;
	overflow: hidden;
	box-sizing: border-box;
	/*padding-bottom: calculateRem(72px);*/
	
	.top-nav{
		width: 100%;
		height: calculateRem(29px);
		margin-top: calculateRem(24px);
		position: relative;
		.nav-wrap{
			width: calculateRem(220px);
			height: calculateRem(29px);
			line-height: calculateRem(27px);
			box-sizing: border-box;
			border-radius: calculateRem(4px);
			border: 1px solid #757e85;
			color: #7d868c;
			margin: 0 auto;
			font-style: 0;
			overflow: hidden;
			background: white;
			.nav{
				display: inline-block;
				width: 49%;
				height: calculateRem(27px);
				background: white;
				text-align: center;
				font-size: calculateRem(15px);
				&:nth-child(1){
					float: left;
				};
				&:nth-child(2){
					float: right;
				};
			}
			.active{
				background: #757e85;
				color: white;

			}

		}
		.ques{
			position: absolute;
			width: calculateRem(18px);
			height: calculateRem(18px);
			background: url(../images/question_icon@2x.png) no-repeat;
			background-size: 100%;
			top: calculateRem(5px);
			right: calculateRem(16px);
			&:active{
				background: #ddd url(../images/question_icon@2x.png) no-repeat;
				background-size: 100%;
			};


		}

		.pop-dialog{
			display: none;
			z-index: 100;
			/*width: calculateRem(300px);*/
			height: auto;
			/*min-height: calculateRem(80px);
			max-height: calculateRem(137px);*/
			background: red;
			position: fixed;
			top: calculateRem(61px);
			right: calculateRem(6px);
			left: calculateRem(48px);
			background: rgba(17,26,35,0.9);
			/*box-shadow: 0 3px 0 0 rgba(0,15,26,0.08);*/
			border-radius: calculateRem(3px);
			box-sizing: border-box;
			padding: calculateRem(15px) calculateRem(16px);
			&:before{
				content: '';
				background: url(../images/up_icon@2x.png) no-repeat;
				width: calculateRem(18px);
				height: calculateRem(10px);
				background-size: 100%;
				position: absolute;
				top: calculateRem(-10px);
				right: calculateRem(10px);

			};

			.dialog-content{
				width: 100%;
				height: auto;
				max-height: calculateRem(150px);
				line-height: calculateRem(18px);
				font-size: calculateRem(13px);
				color: white;
				overflow-y: auto;
			}

		}
	}

	.bottom-blank{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: calculateRem(81px);
		background: white;
		z-index: 10;
		overflow-y: auto;
		box-sizing: border-box;
		padding-bottom: calculateRem(62px);
		.stock-page{
			width: 100%;
			height: auto;
			.stock-item{
				width: 100%;
				height: auto;
				box-sizing: border-box;
				border-bottom: 1px solid #e1e7eb;
				padding: calculateRem(20px) calculateRem(16px) calculateRem(22px);
				overflow: hidden;
				.title{
					width: 100%;
					height: calculateRem(24px);
					line-height: calculateRem(24px);
					font-size: calculateRem(17px);
					color: #333333;
					@include ell;
				}
				.numbers-box{
					width: 100%;
					height: calculateRem(42px);
					margin-top: calculateRem(14px);
					.num-l{
						width: 60%;
						height: calculateRem(42px);
						box-sizing: border-box;
						border-right: 1px solid #c4cbcf;
						float: left;
						font-size: 0;
						.item{
							display: inline-block;
							width: 50%;
							height: calculateRem(42px);
							.num{
								width: 100%;
								height: calculateRem(26px);
								line-height: calculateRem(26px);
								font-size: calculateRem(20px);
								color: #2C3338;
							}
							.txt{
								font-size: calculateRem(13px);
								color: #818B91;
								line-height: calculateRem(18px);
							}
						}
					}
					.num-r{
						width: 39%;
						height: calculateRem(42px);
						float: right;
						box-sizing: border-box;
						padding-left: calculateRem(10px);
						.ref,.new{
							width: 100%;
							height: calculateRem(21px);
							line-height: calculateRem(21px);
							font-size: calculateRem(13px);
							color: #818B91;
							>span{
								font-size: calculateRem(15px);
								color: #2C3338;
								margin-left: calculateRem(6px);
							}
						}
					}
				}
				.red{
					color: #EB1F10!important;
				}
				.green{
					color: #10A615!important;
				}
			}
			.empty{
				width: 100%;
				height: auto;
				overflow: hidden;
				text-align: center;
				>img{
					width: calculateRem(60px);
					height: calculateRem(60px);
					margin-top: calculateRem(80px);

				}
				>p{
					font-size: calculateRem(16px);
					color: #5C656B;
					margin-top: calculateRem(18px);

				}
			}
		}
	}

	.footer{
		position: fixed;
		z-index: 20;
		left: 0;
		right: 0;
		bottom: 0;
		height: calculateRem(60px);
		background: white;
		box-sizing: border-box;
		padding: 0 calculateRem(10px);
		.sign{
			width: 100%;
			height: calculateRem(50px);
			line-height: calculateRem(50px);
			color: white;
			text-align: center;
			font-size: calculateRem(20px);
			box-sizing: border-box;
			background: #E62622;
			border-radius: calculateRem(5px);
			@include ell;
			&:active{
				background:#C51B0D;
			};
		}
	}

	.select-product-mask{
		position: fixed;
		background: rgba(0,15,25,.6);
		z-index: 200;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: none;
		.select-product-dialog{
			position: absolute;
			bottom: calculateRem(10px);
			left: calculateRem(10px);
			right: calculateRem(10px);
			border-radius: calculateRem(13px);
			/*height: calculateRem(290px);*/
			height: auto;
			/*height: auto;
			max-height:  calculateRem(284px);*/
			background: #F3F5F8;
			box-sizing: border-box;
			padding: calculateRem(26px) calculateRem(16px) calculateRem(10px);
			>h3{
				margin: 0;
				text-align: center;
				font-size: calculateRem(20px);
				color: #14171A;
				line-height: calculateRem(28px);
				font-weight: normal;
				margin-bottom: calculateRem(24px);
				/*margin-top: calculateRem(18px);*/
			}
			.products-wrap{
				width: 100%;
				height: auto;
				.product{
					width: 100%;
					height: auto;
					box-sizing: border-box;
					border-radius: calculateRem(3px);
					padding: calculateRem(12px);
					margin-bottom: calculateRem(8px);
					/*border: 1px solid #818B91;
					background: #f7f9fa;*/
					border: 1px solid #d6dbde;
					background: white;
					position: relative;
					&:after{
						content: '';
						display: block;
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						top: 0;
						background: rgba(255,255,255,.6);
						box-sizing: border-box;
					};
					.title{
						width: 100%;
						height: calculateRem(26px);
						font-size: calculateRem(18px);
						color: #000F1A;
						font-weight: bold;
						@include ell;
						margin-bottom: calculateRem(10px);
						>span{
							font-size: calculateRem(15px);
							color: #EB1F10;
							font-weight: normal;
							margin-left: calculateRem(8px);
						}
						>i{
							display: inline-block;
							width: calculateRem(13px);
							height: calculateRem(14px);
							margin-left: calculateRem(8px);
							>img{
								width: 100%;
								height: 100%;

							}
						}
					}
					.funcs{
						width: 100%;
						height: auto;
						>span{
							font-size: calculateRem(13px);
							display: inline-block;
							height: calculateRem(20px);
							line-height: calculateRem(20px);
							border-radius: calculateRem(2px);
							color: #2C3338;
							border: 1px solid #a0aeb7;
							padding: 0 calculateRem(4px);
						}
						>i{
							display: inline-block;
							color: #2c3338;
							font-size:calculateRem(14px);
						}
					}

				}
				.active{
					border: 1px solid #EB1F10;
					&:after{
						display: none;
					};
					
				}
			}
			.close-btn{
				width: calculateRem(32px);
				height: calculateRem(32px);
				position: absolute;
				top: calculateRem(-47px);
				right: calculateRem(15px);
				border-radius: 50%;
				&:after{
					content: '';
					display: block;
					width: 2px;
					height: calculateRem(15px);
					background: rgba(255,255,255,.6);
					position: absolute;
					bottom: calculateRem(-15px);
					left: calculateRem(15px);
				}
				>img{
					width: 100%;
					height: 100%;
				}
			}
		}
		
	}


}